<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 CSS 栅格</title>
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
    <script src="script/jquery-1.10.min.js"></script>
    <script src="script/bootstrap-3.3.7.min.js"></script>

    <!-- 移动设备支持/ -->
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <style type="text/css">
    /*定义HTML标签样式 */
            h1 {color:red} 
            p {color:blue}

            body { /*所有body中  所定义的样式*/
                text-align: center
            }

            .tj { /*定义样式类*/
                background-color: #00ff00;
                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
            }

            .tj1 {
                background-color: #ff00ff;
                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
            }

            .tj2{
                background-color: #00aa00;
                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;
            }

    </style>
</head>
<body>
    <!-- container定义栅格区域 -->
    <div class="container"> 

        <div class="row">
         
         <div class="col-sm-3 col-md-3">
            <div class="thumbnail">  <!--缩略图，自动尺寸-->
              <img src="data/img1.jpg" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>
        

         <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
              <img src="data/img1.jpg" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="#" class="btn btn-danger" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>

        <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
              <img src="data/img1.jpg" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="#" class="btn btn-warning" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>

        <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
              <img src="data/img1.jpg" alt="...">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>...</p>
                <p><a href="#" class="btn btn-info" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
              </div>
            </div>
          </div>
        </div>


    </div>
</body>
</html>